<template>
  <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
  <div id="chartLine" class="line-wrap p-4 shadow"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  data() {
    return {
      chartLine: null,
    };
  },
  //   mounted() {
  //     this.$nextTick(() => {
  //       this.drawLineChart();
  //     });
  //   },
  methods: {
    drawLineChart(title, x, y) {
      this.chartLine = echarts.init(this.$el); // 基于准备好的dom，初始化echarts实例
      let option = {
        title: {
          text: title,
          textStyle: {
            fontSize: 14,
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: x,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "line",
            data: y,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表
      this.chartLine.setOption(option);
    },
  },
};
</script>

<style >
.line-wrap {
  width: 100%;
  height: 300px;
}
</style>